/* SAYFA BAŞLIĞI */
.urun-header {
    text-align:center;
    margin-top:50px;
}
.urun-header h1 {
    font-size:38px;
    font-weight:800;
}
.urun-header p {
    font-size:18px;
    opacity:0.7;
    margin-top:5px;
}

/* ÜRÜN GRID */
.urun-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:35px;
    max-width:1300px;
    margin:60px auto;
    padding:0 20px;
}

/* ÜRÜN KUTULARI */
.urun-kutu {
    background:#fff;
    border-radius:22px;
    padding:25px;
    text-align:center;
    cursor:pointer;
    transition:.3s ease;
    box-shadow:0 8px 18px rgba(0,0,0,0.08);
}
.urun-kutu:hover {
    transform:translateY(-8px);
    box-shadow:0 14px 30px rgba(0,0,0,0.15);
}
.urun-kutu img {
    width:100%;
    height:180px;
    object-fit:contain;
    margin-bottom:15px;
}
.urun-kutu h3 {
    font-size:18px;
    font-weight:700;
    color:#222;
}

/* POPUP */
.popup-container {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
}
.popup-box {
    background:white;
    width:90%;
    max-width:450px;
    padding:30px;
    border-radius:22px;
    position:relative;
    animation:popupIn .35s ease;
    text-align:center;
}
@keyframes popupIn {
    from{ transform:scale(.85); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}
.popup-close {
    position:absolute;
    top:12px;
    right:18px;
    font-size:32px;
    cursor:pointer;
}
.popup-box img {
    width:60%;
    margin-bottom:15px;
}
.popup-box h2 {
    font-size:24px;
    margin-bottom:10px;
    font-weight:700;
}
.popup-box p {
    font-size:16px;
    opacity:.8;
}
    
/* RESPONSIVE */
@media(max-width:992px){
    .urun-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:600px){
    .urun-grid{
        grid-template-columns:1fr;
    }
}
@media(max-width: 600px){

    .kategori-banner {
        height: 210px !important; 
        overflow: hidden;
    }

    .banner-yazi {
        top: 50% !important;           /* tam dikey ortalama */
        left: 50%;
        transform: translate(-50%, -50%) !important;
        padding: 8px 14px;
        border-radius: 10px;
        background: rgba(255,255,255,0.45);
        backdrop-filter: blur(4px);
    }

    .banner-yazi h2 {
        font-size: 20px !important;   /* küçültüldü */
        line-height: 1.2;
    }

    .banner-yazi p {
        font-size: 14px !important;
    }
}